/*
  学习目标：JSX-插值表达式 - 其它类型 
  语法: {表达式}
  表达式:
  1.✅ 变量
  2.✅基本数据类型: string  number boolean undefined  null
    2.1 string number 正常显示
    2.2 boolean undefined  null 不显示
  3.✅引用数据类型: object  array function
    3.1 对象不能放在{}中, 
    3.2 数组可以放在{}中, 数组内的每项元素, 会被当做一个个的dom节点直接渲染处理
    3.3 函数不能放在{}中, 函数的调用往往可以放在{}中
  4.✅其它: 三元/ 逻辑且 / JSX
  
*/

import React from 'react';
import ReactDOM from 'react-dom';

// 💥 函数本身,不能直接放在插值表达式中, 函数的调用往往可以放在{}中
function sayHello() {
  return 'zs';
}

const isLoading = true;

const h1Node = <h1>Hello React</h1>;

const divNode = (
  <div>
    <h1>{sayHello()}</h1>
    <h2>{isLoading ? '加载中...' : '正常显示'}</h2>
    <h2>{isLoading && '加载中...'}</h2>
    {h1Node}
    <h4>{[1, 2, 3]}</h4>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
